<template>
  <lay-notice-bar text="以创造性的行为实践于人世。若能以写作为工具，为道途，先帮助自己一程，再以领悟帮助他人一程。这是一种服务。" mode="link"></lay-notice-bar>
  <lay-container fluid>
    <lay-row space="10">
      <lay-col md="24">
        <lay-container fluid>
          <lay-col md="18" class="drag-item">
            <div class="grid-demo1">
              <div class="card-container">
                <lay-carousel v-model="active1" style="height: 325px;">
                  <lay-carousel-item id="1">
                    <div
                        style="color: white;text-align: center;width:100%;height:325px;line-height:325px;background-color:#009688;">
                      条目一
                    </div>
                  </lay-carousel-item>
                  <lay-carousel-item id="2">
                    <div
                        style="color: white;text-align: center;width:100%;height:325px;line-height:325px;background-color:#5FB878;">
                      条目二
                    </div>
                  </lay-carousel-item>
                </lay-carousel>
              </div>
            </div>
          </lay-col>
          <lay-col md="6" class="drag-item">
            <div class="grid-demo">
              <div class="card-container">
                <lay-card>
                  <Form/>
                </lay-card>
              </div>
            </div>
          </lay-col>
        </lay-container>
      </lay-col>
    </lay-row>
      <lay-row space="10">
        <lay-col md="24">
          <lay-container fluid>
            <lay-split-panel>
              <lay-split-panel-item>
                <a target="_blank" href="/content/gaokao">
                <lay-icon type="layui-icon-search" style="font-size: 50px;padding:10px;" ></lay-icon><br>
                <h3>高考</h3>
                </a>
              </lay-split-panel-item>
              <lay-split-panel-item>
                <a target="_blank" href="/table?modelname=school&orderfield=score&orderasc=asc&select=id%2Cname%2Cprovince%2Ctype%2Cpublic%2Cis_985%2Cis_211%2Cis_two_first">
                <lay-icon type="layui-icon-template-one" style="font-size: 50px;padding:10px;" ></lay-icon><br>
                <h3>院校</h3></a>
              </lay-split-panel-item>
              <lay-split-panel-item>
                <a target="_blank" href="/content/speciality_home">
                <lay-icon type="layui-icon-read" style="font-size: 50px;padding:10px;" ></lay-icon><br>
                <h3>专业</h3>
                </a>
              </lay-split-panel-item>
              <lay-split-panel-item>
                <a href="/content/train_home" target="_blank">
                <lay-icon type="layui-icon-list" style="font-size: 50px;padding:10px;" ></lay-icon><br>
                <h3>培训</h3>
                </a>
              </lay-split-panel-item>
              <lay-split-panel-item>
                <a href="/content/learn_home" target="_blank">
                <lay-icon type="layui-icon-user" style="font-size: 50px;padding:10px;" ></lay-icon><br>
                  <h3>家长课堂</h3>
                </a>
              </lay-split-panel-item>
              <lay-split-panel-item>
                <a href="/content/tiku_home" target="_blank">
                <lay-icon type="layui-icon-survey" style="font-size: 50px;padding:10px;" ></lay-icon><br>
                <h3>题库</h3>
                </a>
              </lay-split-panel-item>
              <!--
              <lay-split-panel-item>
                <lay-icon type="layui-icon-dialogue" style="font-size: 50px;padding:10px;" ></lay-icon><br>
                <h3>性格测评</h3>
              </lay-split-panel-item>
              <lay-split-panel-item>
                <lay-icon type="layui-icon-survey" style="font-size: 50px;padding:10px;" ></lay-icon><br>
                <h3>学习方法测评</h3>
              </lay-split-panel-item>
              <lay-split-panel-item>
                <lay-icon type="layui-icon-survey" style="font-size: 50px;padding:10px;" ></lay-icon><br>
                <h3>智能选科测评</h3>
              </lay-split-panel-item>
              <lay-split-panel-item>
                <lay-icon type="layui-icon-video" style="font-size: 50px;padding:10px;" ></lay-icon><br>
                <h3>视频课程</h3>
              </lay-split-panel-item>-->
            </lay-split-panel>
          </lay-container>
        </lay-col>
      </lay-row>
    <lay-row>
      <lay-col md="6" class="drag-item">
        <div class="grid-demo">
          <div class="card-container">
            <lay-card :title="考试日历">
              <Canlader></Canlader>
            </lay-card>
          </div>
        </div>
      </lay-col>
      <lay-col md="18" class="drag-item">
        <div class="grid-demo">
          <div class="card-container">
            <lay-card title="各地考试院">
              <HrefList></HrefList>
            </lay-card>
          </div>
        </div>
      </lay-col>
      <UnitContent :params="{pagename:'main'}"></UnitContent>
    </lay-row>
  </lay-container>
</template>

<script>
import {ref, onMounted, reactive, toRefs} from 'vue'
import { layer } from '@layui/layer-vue'
import draggable from 'vuedraggable';
import {getArticleList} from '../api/article'
import Canlader from '@/components/Calendar'
import Reg from '@/views/login/reg'
import Form from '@/components/Form'
import HrefList from '@/components/HrefList'
import {useRouter} from "vue-router";
import UnitContent from '@/components/UnitContent'

export default {
  components: {
    draggable,
    Canlader,
    Reg,
    Form,
    HrefList,
    UnitContent
  },
  methods: {
    onMove(obj) {
      return false;
    }
  },
  setup() {
    const router = useRouter();
    const modelname = router.currentRoute.value.query.modelname;
    const active1 = ref("1")
    const state = reactive({
      list: []
    })
    // 调取api获取数据
    const getNewsList = () => {
      const params = {
        page: 1,
        pageSize: 5,
        modelname: modelname
      }
      getArticleList(params).then(res => {
        state.list = res.data
      })
    }
    onMounted(getNewsList)
    // ...toRefs()将state里面得对象解构
    return {
      ...toRefs(state),
      active1
    };
  },
};
</script>

<style>
.container-demo {
  width: 100%;
  height: 325px;
  background: #79C48C;
}

/deep/ .el-calendar-day {
  box-sizing: border-box;
  padding: 5px;
  height: 80px;
}

.grid-demo {
  line-height: 50px;
  border-radius: 2px;
  text-align: center;
  background-color: #ffffff;
  color: #000000;
}

.grid-demo1 {
  line-height: 50px;
  border-radius: 2px;
  text-align: center;
  background-color: #ffffff;
  color: #000000;
  height: 325px;
}

.card-container1 {
  background: whitesmoke;
  padding: 10px;
  width: 70%;
}

.card-container2 {
  background: whitesmoke;
  padding: 10px;
  width: 20%;
}

.card-container {
  background: whitesmoke;
  padding: 10px;
  text-align: left;
}

.drag-container {
  #display: flex;
  justify-content: space-around;
  alignment: center;
}

.drag-item {
  cursor: move; /* 设置拖拽手势 */
  margin: 0px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  padding: 1px;
}

/* 拖拽时显示十字线 */
/*.drag-item:hover {*/
/*  opacity: 1;*/
/*  border: 2px solid red;  修改为你想要的颜色 */
/*}*/
</style>
